<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="shortcut icon"   th:href="@{/favicon.ico}"  type="image/x-icon" />
    <link rel="stylesheet"   th:href="@{/css/font.css}">
    <link rel="stylesheet"   th:href="@{/css/xadmin.css}" >
    <script type="text/javascript"  src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}"  charset="utf-8"></script>
    <script th:src="@{/js/xadmin.js}"   type="text/javascript"  ></script>
    <script th:src="@{/js/echarts.js}"   type="text/javascript"  ></script>
</head>
<body>

<div style="margin-top:20px">
    <form id="dofrom">
        <div class="layui-form-item">
            <label class="layui-form-label">搜索框</label>
            <div class="layui-input-inline">
                <input type="text"  id="search_uname" name="search_uname"  lay-verify="required" placeholder="搜索登录名" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline" style="width:70px">
                <select id="search_gender" name="search_gender" style="height:38px">
                    <option ></option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <button lay-submit lay-filter="search" class="layui-btn layui-btn-primary layui-btn-radius">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <button lay-submit lay-filter="add" class="layui-btn layui-btn-primary layui-btn-radius">
               添加用户
            </button>
        </div>
    </form>


</div>

<table id="userList" lay-filter="test" ></table>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="role-pie" style="width: 100%;height:400px;"></div>

</body>
<script type="text/html" id="barDemo">
  <button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="del">删除</button>
  <button type="button" class="layui-btn layui-btn-sm  layui-btn-info"  lay-submit lay-filter="update"   lay-event="update">修改</button>
</script>
<script type="text/html" id="imgtemplate">
    <img src="{{d.headimg}}" style="width:60px">
</script>
<script type="text/html" id="leveltemplate">
    {{#  if(d.level == 2){ }}
    <span style="color:#cd5353">管理员</span>
    {{#  } else { }}
    <span>普通用户</span>
    {{#  } }}
</script>
<script>
  var rolePie =  echarts.init(document.getElementById('role-pie'))
    $.get('viewrole',function (data){
        rolePie.setOption({
            series:[
                {
                    name:'用户角色占比',
                    type:'pie',
                    radius:'80%',
                    data:data.data
                }
            ],
            roseType:'angle',  // 设置参数 roseType: 'angle' 把饼图显示成『南丁格尔图』。
        })
    },"json")


    layui.use(['table','form'], function(){
        var form = layui.form;
        var table = layui.table;

        //定义表单触发事件
        form.on('submit(search)', function(data){

            var search_uname = $("#search_uname").val();
            var search_gender = $("#search_gender").val();
            //ajax查询
            //查询表格
            table.reload("userList",{ //刷新表格
                where: {
                    "uname":search_uname
                    ,"gender":search_gender
                } //设定异步数据接口的额外参数
                ,height: 600
                ,url: 'listpage' //数据接口
                ,page: true //开启分页
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(add)', function(data){
            x_admin_show("添加用户","toaddUser",900,600);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //渲染用户数据表格
        table.render({
            elem: '#userList'
            // ,height: 500
            ,minWidth:110
            ,url: 'listpage' //数据接口
            ,page: true //开启分页
            ,cols: [
                [ //表头
                {field: 'id', title: 'ID',  sort: true, fixed: 'left',align:'center'}
                ,{field: 'uname', title: '用户登录名' ,align:'center'}
                ,{field: 'upass', title: '密码' , sort: true,align:'center'}
                ,{field: 'name', title: '真实姓名' ,align:'center'}
                ,{field: 'headimg', title: '头像' ,align:'center' , templet:'#imgtemplate'}
                ,{field: 'gender', title: '性别' ,align:'center', templet:function (d){
                    if (d.gender == "男" ){
                    return "<span class=\"layui-badge layui-bg-cyan\">男</span>"
                    }else {
                        return "<span class=\"layui-badge\">女</span>"
                    }
                    }}
                ,{field: 'level', title: '用户等级', width: 110,align:'center', sort: true,templet:'#leveltemplate'}
                ,{field: 'roleid', title: '用户角色id', width: 115,align:'center'}
                ,{field: 'right', title: '操作', width: 200,align: 'center',toolbar: '#barDemo'}
            ]
            ]
        });
        //工具栏
        table.on('tool(test)',function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'del'){
                layer.confirm('真的删除行么',function(){
                    deleteById(data.id)
                    table.reload("listpage",{ //刷新表格
                        where: {} //设定异步数据接口的额外参数
                        ,height: 600
                        ,url: 'list' //数据接口
                        ,page: true //开启分页
                    })
                })
            }else if (layEvent === 'update'){
                var id =  data.id;
                form.on('submit(update)', function(data){
                    x_admin_show("修改资料","toupdate/"+id,900,600);
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
            }
        })
    });

    function deleteById(id) {
        $.ajax({
            async:false,
            dataType:"JSON",
            url: "del/"+id,
            success: function(data) {
                layer.msg(data.msg)
            },error:function(){
                layer.msg("没有删除权限")
            }
        })
    }
</script>
</html>